<template>
  <div class="articles">
    <header class="articles-header">
      <h1>所有文章</h1>
      <div class="filters">
        <select v-model="selectedCategory"
                class="filter-select">
          <option value="">所有分类</option>
          <option v-for="category in categories"
                  :key="category"
                  :value="category">
            {{ category }}
          </option>
        </select>
        <div class="sort-options">
          <button :class="{ active: sortBy === 'date' }"
                  @click="sortBy = 'date'">
            最新
          </button>
          <button :class="{ active: sortBy === 'views' }"
                  @click="sortBy = 'views'">
            最热
          </button>
        </div>
      </div>
    </header>

    <main class="articles-grid">
      <article v-for="article in filteredArticles"
               :key="article.id"
               class="article-card"
               @click="goToArticle(article.id)">
        <div class="article-image"
             :style="{ backgroundImage: `url(${article.cover})` }">
          <div class="article-category">{{ article.category }}</div>
        </div>
        <div class="article-content">
          <h2>{{ article.title }}</h2>
          <p>{{ article.excerpt }}</p>
          <div class="article-meta">
            <span class="date">{{ article.date }}</span>
            <span class="views">{{ article.views }} 阅读</span>
          </div>
          <div class="article-tags">
            <span v-for="tag in article.tags"
                  :key="tag"
                  class="tag">
              #{{ tag }}
            </span>
          </div>
        </div>
      </article>
    </main>

    <div class="pagination">
      <button :disabled="currentPage === 1"
              @click="currentPage--">
        上一页
      </button>
      <span>{{ currentPage }} / {{ totalPages }}</span>
      <button :disabled="currentPage === totalPages"
              @click="currentPage++">
        下一页
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const selectedCategory = ref('');
const sortBy = ref('date');
const currentPage = ref(1);
const itemsPerPage = 9;

// 模拟文章数据
const articles = ref([
  {
    id: 1,
    title: 'Vue3 组合式 API 最佳实践',
    excerpt: '探索 Vue3 组合式 API 的各种使用场景和最佳实践...',
    date: '2024-03-20',
    category: '前端开发',
    views: 1234,
    tags: ['Vue3', 'JavaScript', '前端'],
    cover: 'https://picsum.photos/600/400?random=1'
  },
  {
    id: 2,
    title: 'Three.js 创建炫酷的 3D 效果',
    excerpt: '学习如何使用 Three.js 创建令人惊叹的 3D 视觉效果...',
    date: '2024-03-19',
    category: '3D 图形',
    views: 856,
    tags: ['Three.js', 'WebGL', '3D'],
    cover: 'https://picsum.photos/600/400?random=2'
  },
  // 添加更多文章...
]);

const categories = computed(() => {
  return [...new Set(articles.value.map(article => article.category))];
});

const filteredArticles = computed(() => {
  let filtered = [...articles.value];
  
  if (selectedCategory.value) {
    filtered = filtered.filter(article => article.category === selectedCategory.value);
  }
  
  filtered.sort((a, b) => {
    if (sortBy.value === 'date') {
      return new Date(b.date) - new Date(a.date);
    } else {
      return b.views - a.views;
    }
  });
  
  return filtered;
});

const totalPages = computed(() => {
  return Math.ceil(filteredArticles.value.length / itemsPerPage);
});

const goToArticle = (id) => {
  router.push(`/article/${id}`);
};
</script>

<style scoped>
.articles {
  max-width: 1200px;
  margin: 100px auto;
  padding: 0 2rem;
}

.articles-header {
  margin-bottom: 3rem;
  color: #fff;
}

.articles-header h1 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(45deg, #fff, #88ccff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.filter-select {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
}

.sort-options {
  display: flex;
  gap: 1rem;
}

.sort-options button {
  padding: 0.5rem 1.5rem;
  border: none;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.sort-options button.active {
  background: #88ccff;
  color: #000;
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.article-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.article-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.article-image {
  height: 200px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.article-category {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.3rem 0.8rem;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 15px;
  font-size: 0.8rem;
}

.article-content {
  padding: 1.5rem;
  color: #fff;
}

.article-content h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #fff;
}

.article-content p {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1rem;
  line-height: 1.6;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.article-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tag {
  padding: 0.2rem 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  font-size: 0.8rem;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  color: #fff;
}

.pagination button {
  padding: 0.5rem 1.5rem;
  border: none;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination button:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 768px) {
  .articles {
    margin: 80px auto;
  }
  
  .filters {
    flex-direction: column;
    gap: 1rem;
  }
  
  .articles-header h1 {
    font-size: 2rem;
  }
}
</style> 